<template>
    <div class="dialog-notice">
        <el-dialog title="农家乐信息" :visible.sync="dialogVisible" width="50%" @close="handleClose">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="img" label="农家乐主图片" :label-width="formLabelWidth">
                    <el-upload class="upload-demo" action="http://134.175.252.64:8080/file/upload"
                        :on-success="handleSuccess" multiple :limit="10" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item prop="title" label="农家乐标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="content" label="农家乐内容" :label-width="formLabelWidth">
                    <EditorComponent @getContent="getContent"></EditorComponent>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="info" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import EditorComponent from '../../../components/edtior/index'
export default {
    name: 'AgritainmentDialog',
    components: {
        EditorComponent
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            dialogVisible: false,
            form: {
                img: '',
                title: '',
                content: ''
            },
            formLabelWidth: '120px',
            rules: {
                // img: [{ required: true, message: '请选择要上传图片！', trigger: 'change' }],
                title: [{ required: true, message: '请输入标题，不能为空！', trigger: 'blur' }],
                content: [{ required: true, message: '请输入内容，不能为空！', trigger: 'blur' }]
            },
            fileList: [],
            imageUrl: ''
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo']),
        hasId() {
            return 'id' in this.form
        }
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('add', this.dialogShow)
        this.$bus.$on('getForm', this.getForm)
    },
    methods: {
        handleClose() {
            this.form = {}
            this.fileList = []
            this.$emit('getAgritainmentData')
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj
                    if (this.hasId) {
                        obj = {
                            id: this.form.id,
                            img: this.imageUrl,
                            title: this.form.title,
                            content: this.form.content,
                            createdBy: this.userInfo.username
                        }

                    } else {
                        obj = {
                            img: this.imageUrl,
                            title: this.form.title,
                            content: this.form.content,
                            createdBy: this.userInfo.username
                        }
                    }

                    this.$emit('addAgritainmentInfo', obj)
                    this.$message({
                        type: 'success',
                        message: '操作成功！'
                    })
                    this.dialogVisible = false
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        dialogShow(value) {
            this.dialogVisible = true
        },
        getForm(editRow) {
            this.form = editRow
            this.imageUrl = editRow.img
        },
        handleSuccess(response, file, fileList) {
            this.imageUrl = response.data.url
        },
        getContent(content) {
            this.form.content = content
        }
    }
};
</script>
<style lang='less' scoped>
.dialog-notice {
    background-color: aqua;

    .el-input__inner:focus {
        border-color: #11A983 !important;
        /* 使用!important确保覆盖 */
    }

    .upload-demo {
        .el-button--primary {
            color: white;
            background-color: #11A983;
        }
    }
}
</style>